<template>
  <div>
    <!-- 顶部固定栏 -->
    <div class="peo_top">
      <img class="peo_friendadd" src="../assets/friendadd.png">
      <div>我</div>
      <img class="peo_erweima" src="../assets/erweima.png">
      <img class="peo_shezhi" src="../assets/shezhi.png">
    </div>
    <div class="peo_wrap"></div>
    <!-- 主体内容 -->
    <div class="peo_container">
      <!-- 个人信息 -->
      <div class="peo_msg">
        <!-- 简介内容 -->
        <div class="peo_yonghu">
          <img class="peo_avatar" src="../assets/avatar/1.jpg">
          <div class="peo_yh">
            <div class="peo_uname">这里是用户名</div>
            <div class="peo_desc">这里是简介:性别女</div>
          </div>
          <div class="peo_vip"><img class="peo_isVIP" src="../assets/crownfill.png"><span>会员</span></div>
        </div>
        <!-- 微博，数量，粉丝 -->
        <div class="peo_num">
          <div class="peo_count">
            <div>9</div>
            <div>微博</div>
          </div>
          <div class="peo_count">
            <div>59</div>
            <div>关注</div>
          </div>
          <div class="peo_count">
            <div>988</div>
            <div>粉丝</div>
          </div>
        </div>
      </div>
      <div class="peo_wraps"></div>
      <!-- 个人功能 -->
      <div class="peo_fun">
        <div class="peo_cz">
          <div><img class="peo_pic" src="../assets/xiangce.png"></div>
          <div>我的相册</div>
        </div>
        <div class="peo_cz">
          <div><img class="peo_pic" src="../assets/zan.png"></div>
          <div>赞/收藏</div>
        </div>
        <div class="peo_cz">
          <div><img class="peo_pic" src="../assets/shizhong.png"></div>
          <div>浏览记录</div>
        </div>
        <div class="peo_cz">
          <div><img class="peo_pic" src="../assets/caogao.png"></div>
          <div>草稿箱</div>
        </div>
        <div class="peo_cz">
          <div><img class="peo_pic" src="../assets/qianbao.png"></div>
          <div>我的钱包</div>
        </div>
        <div class="peo_cz">
          <div><img class="peo_pic" src="../assets/biaoqiankuozhan_shipin-183.png"></div>
          <div>创作中心</div>
        </div>
        <div class="peo_cz">
          <div><img class="peo_pic" src="../assets/dengpao.png"></div>
          <div>粉丝头条</div>
        </div>
        <div class="peo_cz">
          <div><img class="peo_pic" src="../assets/jianceguanli.png"></div>
          <div>客服</div>
        </div>
      </div>
      <div class="peo_wraps"></div>
      <!-- 微公益 -->
      <div>
        <!-- 题头 -->
        <div class="peo_gy">
          <img src="../assets/liebiaodaohang_gongyi.png">
          <div>微公益</div>
          <div>立即参与</div>
        </div>
        <!-- 内容 -->
        <div class="peo_con">
          <!-- 爱心积分 -->
          <div class="peo_jf">
            <div>0</div>
            <div>爱心积分</div>
            <div>累积</div>
          </div>
          <!-- 爱心捐款 -->
          <div class="peo_jk">
            <img src="../assets/jianceguanli.png">
            <div>爱心捐款</div>
            <div>参与项目捐款</div>
          </div>
          <!-- 星光公益 -->
          <div class="peo_xg">
            <img src="../assets/ziyuan.png">
            <div>星光公益</div>
            <div>助力明星公益</div>
          </div>
        </div>
      </div>
      <div class="peo_wraps"></div>
      <!-- 微博关注检测 -->
      <div>
        <!-- 题头 -->
        <div class="peo_gy">
          <img src="../assets/jianceguanli.png">
          <div>微博关注检测</div>
          <div>立即查看</div>
        </div>
        <!-- 内容 -->
        <div class="peo_con">
          <!-- 微博关注检测 -->
          <div class="peo_jf">
            <img src="../assets/caogao.png">
            <div>微博关注检测</div>
            <!-- <div></div> -->
          </div>
          <!-- 查看沉寂用户 -->
          <div class="peo_jk">
            <img src="../assets/wangluojiance.png">
            <div>查看沉寂用户</div>
          </div>
          <!-- 全站最热博主 -->
          <div class="peo_xg">
            <img src="../assets/huo.png">
            <div>全站最热博主</div>
          </div>
        </div>
      </div>
      <div class="peo_wraps"></div>
      <!-- 更多功能卡片 -->
      <div class="peo_more">
        <span>··········</span><span>&nbsp;更多功能卡片&nbsp;</span><span>··········</span>
      </div>
        
      <!-- 免流量 -->
      <div class="peo_gy">
        <img src="../assets/sim_card.png">
        <div>免流量</div>
        <span class="peo_free">流量免费任性玩</span>
      </div>
      <div class="peo_wraps"></div>
    </div>



    <!-- 底部导航栏 -->
    <mt-tabbar v-model="selected_bottom" fixed>
      <mt-tab-item id="home">
        <img v-if="selected_bottom=='home'" src="../assets/homefill.png" slot="icon">
        <img v-else src="../assets/home.png" slot="icon">
        首页
      </mt-tab-item>
      <mt-tab-item id="video">
        <img v-if="selected_bottom=='video'" src="../assets/recordfill.png" slot="icon">
        <img v-else src="../assets/record.png" slot="icon">
        视频号
      </mt-tab-item>
      <mt-tab-item id="found">
        <img v-if="selected_bottom=='found'" src="../assets/samefill.png" slot="icon">
        <img v-else src="../assets/same.png" slot="icon">
        发现
      </mt-tab-item>
      <mt-tab-item id="community">
        <img v-if="selected_bottom=='community'" src="../assets/communityfill.png" slot="icon">
        <img v-else src="../assets/community.png" slot="icon">
        消息
      </mt-tab-item>
      <mt-tab-item id="people">
        <img v-if="selected_bottom=='people'" src="../assets/peoplefill.png" slot="icon">
        <img v-else src="../assets/people.png" slot="icon">
        我
      </mt-tab-item>
    </mt-tabbar> 
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected_bottom:"people"
    }
  },
  watch: {
    // 页面跳转
    selected_bottom(newval){
      if(newval=="home"){
        this.$router.push('/');
      }else if(newval=="video"){
        this.$router.push('/video');
      }else if(newval=="found"){
        this.$router.push('/found');
      }else if(newval=="community"){
        this.$router.push('/community');
      }else if(newval=="people"){
        this.$router.push('/people');
      }
    }
  }
}
</script>
<style scoped>
/* 顶部 */
.peo_top{
  height: 60px;
  width: 100%;
  background-color: #FAFAFA;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  border-bottom: 1px solid #EBEBEB;
}
/* 顶部的图片 */
.peo_top img{
  padding-top: 17px;
  height: 30px;
}
/* 添加朋友 */
.peo_friendadd{
  margin-left: 10px;
}
/* 文字 */
.peo_top div{
  margin-left: 130px;
  line-height: 60px;
  font-size: 18px;
}
/* 扫二维码 */
.peo_erweima{
  margin-left: 100px;
}
/* 设置 */
.peo_shezhi{
  margin-left: 10px;
}
/* 换行 */
.peo_wrap,
.peo_wraps{
  height: 7px;
  width: 100%;
  background-color: #EDEDED;
}
.peo_wrap{
  padding-top: 52px;
}
/* 主体 */
.peo_container{
  margin-bottom: 60px;
}
/* 用户信息 */
.peo_yonghu{
  position: relative;
  height: 100px;
  display: flex;
}
/* 头像 */
.peo_avatar{
  height: 80px;
  margin-top: 10px;
  margin-left: 10px;
  border-radius: 50%;
  line-height: 100px;
}
/* 用户信息 */
.peo_yh{
  margin-left: 10px;
}
.peo_uname{
  margin-top: 20px;
  font-size: 18px;
}
.peo_desc{
  margin-top: 10px;
  font-size: 14px;
  color: #999;
}
/* 是否为VIP */
.peo_vip{
  height: 100px;
  position: absolute;
  right: 7px;
  font-size: 14px;
}
.peo_isVIP{
  vertical-align: middle;
  height: 20px;
}
.peo_vip span{
  height: 100px;
  line-height: 100px;
  color: rgb(255, 150, 68);
}
/* 关注，微博，粉丝数量 */
.peo_num{
  border-top: 1px solid #999;
  height: 65px;
  display: flex;
  justify-content: space-between;
}
/* 数量 */
.peo_count{
  width: 33.3%;
  text-align: center;
  color: #999;
  font-size: 13px;
}
/* 文字 */
.peo_count div:first-child{
  margin-top: 15px;
  font-size: 15px;
  color: black;
}
/* 个人功能 */
.peo_fun{
  display: flex;
  flex-wrap: wrap;
}
.peo_cz{
  width: 19%;
  margin: 3%;
}
.peo_cz div:first-child,
.peo_cz div:last-child{
  text-align: center;
  font-size: 13px;
}
.peo_cz div:first-child{
  height: 60px;
}
/* 功能图片 */
.peo_pic{
  width: 50px;
}
/* 微公益题头 */
.peo_gy{
  display: flex;
  height: 40px;
  line-height: 40px;
  margin-top: 5px;
  position: relative;
}
.peo_gy>img:first-child{
  width: 40px;
  margin: 0 5px;
}
.peo_gy>div:last-child{
  position: absolute;
  right: 5px;
  color: #999;
  font-size: 14px;
}
/* 微公益内容 */
.peo_con{
  display: flex;
  justify-content: space-around;
  margin: 10px 0;
}
.peo_con>div{
  text-align: center;
}
.peo_con img{
  height: 70px;
  margin-bottom: 5px;
}
.peo_jf>div:first-child{
  height: 80px;
  line-height: 80px;
  color: rgb(255, 150, 68);
  font-size: 28px;
  font-weight: bold;
}
.peo_jf>div:nth-child(3),
.peo_jk>div:nth-child(3),
.peo_xg>div:nth-child(3){
  font-size: 14px;
  color: #999;
  margin-top: 5px;
}

/* 更多功能卡片 */
.peo_more{
  margin-top: 5px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  color: #999;
  background-color: #EDEDED;
}
.peo_more span:nth-child(2){
  font-size: 14px;
  color: #3AA2FF;
}
/* 免流量 */
.peo_free{
  display: inline-block;
  font-size: 14px;
  color: #999;
  margin-left: 5px;
}

/* 底部选项卡 */
.mint-tabbar>.mint-tab-item.is-selected{
  color: #2C3E50;
}
</style>